<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>广播式WebSocket</title>
  <script th:src="@{js/sockjs.min.js}"></script>
  <script th:src="@{js/stomp.js}"></script>
  <script th:src="@{js/jquery-3.1.1.js}"></script>
</head>
<body onload="connect2()">
<noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript>
<div>
  <div>
    <button id="connect" onclick="connect();">连接</button>
    <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
  </div>

  <div id="conversationDiv">
    <label>输入你的名字</label><input type="text" id="name"/>
    <button id="sendName" onclick="sendName();">发送</button>
    <p id="response"></p>
  </div>
</div>
<script type="text/javascript">
  var stompClient = null;
  function setConnected(connected) {
    document.getElementById("connect").disabled = connected;
    document.getElementById("disconnect").disabled = !connected;
    document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
    $("#response").html();
  }
  function connect() {
    var socket = new SockJS('/endpointGoku');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
      setConnected(true);
      console.log('Connected:' + frame);
      stompClient.subscribe('/topic/getResponse', function (response) {
        showResponse(JSON.parse(response.body).responseMessage);
      })
    });
  }
  function connect2() {
      var socket = new SockJS('/endpointGoku');
      stompClient = Stomp.over(socket);
      stompClient.connect({}, function (frame) {
          setConnected(true);
          console.log('Connected:' + frame);
          stompClient.subscribe('/topic/getResponse2', function (response) {
              showResponse(JSON.parse(response.body).responseMessage);
          })
      });
  }
  function disconnect() {
    if (stompClient != null) {
      stompClient.disconnect();
    }
    setConnected(false);
    console.log('Disconnected');
  }
  function sendName() {
    var name = $('#name').val();
    console.log('name:' + name);
    stompClient.send("/welcome", {}, JSON.stringify({'name': name}));
  }
  function sendName2() {
      var name = $('#name').val();
      console.log('name:' + name);
      stompClient.send("/welcome2");
  }
  function showResponse(message) {
      $("#response").html(message);
  }
  setInterval(sendName2,1000);
</script>
</body>
</html>